<template>
	<view>
		<!-- <nav-header title="联系客服" @onNavBack="onNavBack" :showRight="false" backUrl="/mine/mine"></nav-header> -->
		<nav-header title="联系客服" :showRight="false"></nav-header>
		<view class="mine-kefu" v-if="!success">
			<view class="kefu">
				<uni-forms ref="form" :model="form" :rules="rules">
					<view class="title">
						<text class="text-sm-Medium">问题内容</text>
						<text class="text-sm-Regular" style="color: #A4A7AE;" v-if="fontNum!=0">{{fontNum}}/300</text>
						<text class="text-sm-Regular" style="color: #A4A7AE;" v-else>{{countQuestion}}/300</text>
					</view>
					<uni-forms-item name="tousu">
						<uni-easyinput type="textarea" maxlength="300" autoHeight @input="sumTousu" v-model="form.tousu"
							placeholder="请输入问题内容" :inputBorder="false" />
					</uni-forms-item>
					<view>
						<text class="text-sm-Medium">您的联系方式</text>
					</view>
					<uni-forms-item name="phone">
						<uni-easyinput type="number" maxlength="11" v-model="form.phone" placeholder="请输入手机号码方便客服联系您"
							:inputBorder="false" />
					</uni-forms-item>
				</uni-forms>
				<view class="commit">
					<view class="button-style">
						<button class="btncolor" @click="submitForm">
							<text class="text-md-Medium" style="color: #fff;">发送</text>
						</button>
					</view>
				</view>
			</view>
		</view>

		<view class="sub-success" v-else>
			<view class="success">
				<!-- <img :src="getResource('/icon/correct.svg')" alt="" class="success-img"> -->
				<svg-icon icon="check-1" :width="192"></svg-icon>
				<text class="text-md-Regular">感谢您的理解，我们已经收到您提出的问题，将会尽快核实并回复您。您可以在<text
						style="color: #2970FF;">通讯录-平台通知</text>中接收平台给您的回复信息</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					tousu: "",
					phone: "",
				},
				success: false,
				fontNum: 0,
				countQuestion: 0,
				rules: {
					tousu: {
						rules: [{
							required: true,
							errorMessage: '请输入问题内容',
						}]
					},
					phone: {
						rules: [{
								required: true,
								errorMessage: '请输入联系方式',
							},
							{
								minLength: 11,
								errorMessage: '请输入正确的手机号',
							}
						]
					}
				}
			}
		},
		methods: {
			onNavBack() {
				uni.switchTab({
					url: "/pageSubOne/mine/mine"
				})
			},
			sumTousu(e) {
				this.countQuestion = e.length
			},
			submitForm() {
				this.$refs.form.validate().then(res => {
					this.success = true
					uni.showToast({
						title:"发送成功"
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 3000)
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		},
		onLoad() {
			this.countQuestion = this.form.tousu.length
		}
	}
</script>

<style lang="scss" scoped>
	.mine-kefu {
		width: 100%;

		.kefu {
			display: flex;
			flex-direction: column;
			padding: 24rpx 32rpx;
			gap: 24rpx;
			color: $gray-900;

			:deep(.uni-forms) {
				height: 232rpx;
			}

			:deep(.uni-easyinput__content.is-textarea) {
				// height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100 !important;
			}

			:deep(.uni-forms) {
				height: 88rpx;
			}

			:deep(.uni-easyinput__content-input) {
				height: 40rpx;
				padding: 24rpx 32rpx;
				background-color: $gray-100;
			}

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			// text {
			// 	color: #959595;
			// 	// font-size: 32rpx;

			// 	.kefu {
			// 		color: #048df5;
			// 	}
			// }

			.commit {
				width: 100%;
				position: fixed;
				bottom: 42rpx;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.button-style {
					padding: 24rpx 32rpx;
					width: 100%;
				}

				.btncolor {
					width: 100%;
					background-color: $brand-500;
					color: $white;
					border-radius: 34rpx;
					padding: 8rpx 24rpx;
					line-height: 60rpx;
					text-align: center;
				}
			}
		}
	}

	.sub-success {
		width: 100%;
		position: absolute;
		top: 30%;

		.success {
			padding: 24rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			gap: 48rpx;

			.success-img {
				width: 200rpx;
				height: 200rpx;
			}

			text {
				color: $gray-600;
				text-align: center;
			}
		}
	}
</style>